<template>
	<!-- 个人中心页 -->
	<view class="Jy_my_center_page">
		<view class="Jy_customer_my_center_top_group" :style="{ 'padding-top': statusBarHeight + 'px' }">
			<view class="Jy_customer_my_center_top_box" v-if="userInfo.phone" @click="getMyInfo">
				<!-- 用户头像 -->
				<view class="Jy_customer_my_center_logo_box">
					<image :src="userInfo.avatar" mode="aspectFill"></image>
				</view>
				<view class="Jy_customer_my_center_location_group">
					<view class="Jy_customer_my_center_location_box">
						<!-- 用户登录的手机号码 / 或者用户昵称 --> 
						<view class="Jy_customer_my_center_location_name_group">
							<view class="Jy_customer_my_center_location_name_box">
								<text>{{ userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</text>
							</view> 
						</view>
					</view> 
				</view>
			</view>
			<view class="Jy_customer_my_center_not_login_box" v-else @click="getWeChatLogin"><text>点击登录</text></view>
		</view>

		<scroll-view scroll-y="true" :style="{ height: 'calc(100vh - ' + statusBarHeight + 'px - 76rpx)' }">
			<!-- 会员卡 -->
			<view class="Jy_main_my_center_group">
				<view class="jy_my_center-zc-time-group">
					<view class="jy_my_center-zc-time-box">
						<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/order_state/mycenter_days.png" mode="widthFix"></image>
						<view class="zc_day-content-box">
							<text>你与英郎的</text>
							<text class="days">{{ registrationDays }}</text>
							<text>天</text>
						</view>

						<view class="money-button-box" v-if="isShowMoney" @click="isShowMoney = false">
							<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/more_button/open_yan.png" mode="aspectFill"></image>
						</view>
						<view class="money-button-box" v-else @click="isShowMoney = true">
							<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/more_button/closes_yan.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="Jy_new-user-group">
						<view class="Jy_new-user-box"><text>新用户</text></view>
					</view>
				</view>
				<view class="Jy_main_my_center_box">
					<view class="membership_card_box">
						<view class="membershop-left-group">
							<view class="membershop-left-box">
								<view class="down_order-box"><text>总共下单</text></view>
								<view class="down_order-number-box">
									<text class="number">{{ isShowMoney ? bill.oddNumber : '****' }}</text>
									<text>笔</text>
								</view>
							</view>
						</view>
						<view class="membershop-right-group">
							<view class="membershop-right-box">
								<view class="xf-title-box"><text>总共消费</text></view>
								<view class="xf-number-box">
									<text class="number">{{ isShowMoney ? bill.totalConsumption : '****' }}</text>
									<text>元</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 我的订单 -->
			<view class="Jy_my_center_order_group">
				<view class="Jy_my_center_order_title_box">
					<view class="left_box"><text>我的订单</text></view>
					<view class="right_box" @click="getOrderCenter(0)">
						<view class="all_button_text_box"><text>全部</text></view>
						<view class="right_icon_box"><image src="http://120.78.177.187:8083/crmebimage/public/mpImage/main_menu/right.png" mode="aspectFit"></image></view>
					</view>
				</view>
				<view class="Jy_my_center_order_state_button_group">
					<view class="Jy_my_center_order_state_button_box" v-for="(item, index) in orderStateList" :key="index" @click="getOrderCenter(index + 1)">
						<view class="state_group">
							<view class="state_image_box">
								<image :src="item.icon_url" mode="aspectFit"></image>
								<view class="red_dot_box" v-if="index === 0 || index === 3 ? true : false"><text>9</text></view>
							</view>
							<view class="state_text_box">
								<text>{{ item.state }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 浏览历史 -->
			<view class="Jy_my_center_history_group">
				<view class="Jy_my_center_order_title_box">
					<view class="left_box">
						<text class="title_box">浏览历史</text>
						<text class="number_box">(10)</text>
					</view>
					<view class="right_box" @click="getBrowseHistory">
						<view class="all_button_text_box"><text>全部</text></view>
						<view class="right_icon_box"><image src="http://120.78.177.187:8083/crmebimage/public/mpImage/main_menu/right.png" mode="aspectFit"></image></view>
					</view>
				</view>
				<view class="Jy_my_center_order_state_button_group">
					<view class="history_shop_list_group">
						<view class="history_shop_list_box" v-for="(item, index) in 10" :key="index">
							<view class="history_shop_list_sign" @click="getShopDetail()">
								<view class="history_shop_image_box">
									<image src="https://img95.699pic.com/photo/50088/5720.jpg_wh860.jpg" mode="aspectFill"></image>
								</view>
								<view class="history_shop_info_group">
									<view class="history_shop_right_price_box">
										<text class="symbl">￥</text>
										<text class="size">1999</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 更多功能 -->
			<view class="Jy_my_center_more_setUp_group">
				<view class="Jy_my_center_order_title_box"><text>更多功能</text></view>
				<view class="Jy_my_center_order_state_button_group">
					<view class="Jy_my_center_order_state_button_box" v-for="(item, index) in moreSetUpList" :key="index" @click="getMoreButtonPage(item.pageurl)">
						<view class="state_group" v-if="index != 4">
							<view class="state_image_box">
								<image :src="item.icon_url" mode="aspectFit"></image>
								<view class="red_dot_box" v-if="index === 0 || index === 3 ? true : false"><text></text></view>
							</view>
							<view class="state_text_box">
								<text>{{ item.state }}</text>
							</view>
						</view>
						
						<view class="state_group" v-else>
							<button open-type="contact" show-message-card session-from send-message-path send-message-title>
								<view class="state_image_box">
									<image :src="item.icon_url" mode="aspectFit"></image>
									<view class="red_dot_box" v-if="index === 0 || index === 3 ? true : false"><text></text></view>
								</view>
								<view class="state_text_box">
									<text>{{ item.state }}</text>
								</view>
							</button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 适配头部导航高度
			statusBarHeight: getApp().globalData.statusBarHeight,
			userInfo: {},
			// 订单状态
			orderStateList: [
				{
					icon_url: require('../../../static/order_state/be_paid.png'),
					state: '待付款'
				},
				{
					icon_url: require('../../../static/order_state/be_shipped.png'),
					state: '待发货'
				},
				{
					icon_url: require('../../../static/order_state/be_received.png'),
					state: '待收货'
				},
				{
					icon_url: require('../../../static/order_state/be_evaluated.png'),
					state: '待评价'
				},
				{
					icon_url: require('../../../static/order_state/refund.png'),
					state: '退款/售后'
				}
			],
			// 更多功能按钮
			moreSetUpList: [
				{
					icon_url: require('../../../static/more_button/skill.png'),
					state: '秒杀记录',
					pageurl: '/pagesA/main/customerMyCenter/mySecondKill/mySecondKill'
				},
				{
					icon_url: require('../../../static/more_button/pgroup2.png'),
					state: '拼团记录',
					pageurl: '/pagesA/main/customerMyCenter/myGroups/myGroups'
				},
				{
					icon_url: require('../../../static/more_button/bargain.png'),
					state: '砍价记录',
					pageurl: '/pagesA/main/customerMyCenter/bargainRecord/bargainRecord'
				},
				{
					icon_url: require('../../../static/more_button/collection.png'),
					state: '我的收藏',
					pageurl: '/pagesA/main/customerMyCenter/myCollection/myCollection'
				},
				{
					icon_url: require('../../../static/more_button/kefu2.png'),
					state: '联系客服',
					// pageurl: '/pagesA/main/customerMyCenter/contactService/contactService'
					pageurl: ''
				},
				{
					icon_url: require('../../../static/more_button/address.png'),
					state: '收货地址',
					pageurl: '/pagesA/main/customerMyCenter/shippingAddress/shippingAddress'
				},
				{
					icon_url: require('../../../static/more_button/sizi.png'),
					state: '设置',
					pageurl: '/pagesA/main/customerMyCenter/setUp/setUp'
				}
			],
			// 账单 下单数量 / 总共消费
			bill: {
				oddNumber: 0,
				totalConsumption: 0
			},
			// 下单数量 / 总共消费显示隐藏
			isShowMoney: false,
			// 用户注册天数
			registrationDays: 1
		};
	},
	onShow() {
		this.getUserInfo();
	},
	// tabbar 按钮被点击
	onTabItemTap(e) {
		// 播放音效
		this.music.play_dede();
	},
	methods: {
		// 跳转到订单中心
		getOrderCenter(index) {
			if (index == 5) {
				// 跳转到退款/售后页
				uni.navigateTo({
					url: '/pagesA/main/customerMyCenter/afterSales/afterSales'
				});
			} else {
				uni.navigateTo({
					url: '/pagesA/main/customerMyCenter/orderCenter/orderCenter?index=' + index
				});
			}
		},
		// 跳转到微信授权页
		getWeChatLogin() {
			uni.navigateTo({
				url: '/pagesA/main/customerMyCenter/userWechatLogin/userWechatLogin'
			});
		},
		// 跳转到个人信息页面
		getMyInfo() {
			uni.navigateTo({
				url: '/pagesA/main/customerMyCenter/myInfo/myInfo?userIfo=' + JSON.stringify(this.userInfo)
			});
		},
		// 更多功能页面跳转
		getMoreButtonPage(url) {
			if (url) {
				uni.navigateTo({
					url: url
				});
			}
		},
		// 跳转到浏览历史
		getBrowseHistory() {
			uni.navigateTo({
				url: '/pagesA/main/customerMyCenter/browseHistory/browseHistory'
			});
		},
		// 跳转到商品详情
		getShopDetail() {
			uni.navigateTo({
				url: '/pages/shoppingDetail/shoppingDetail'
			});
		},
		// 获取用户信息
		getUserInfo() {
			let userInfo = uni.getStorageSync("yljjUserInfo");
			if (userInfo) {
				this.userInfo = userInfo;
				console.log("用户信息:" + userInfo)
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import 'customerMyCenter.scss';
</style>
